<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";

const router = useRouter()
const onClickLeft = () => {
  router.push('/select')
}

const topic = ref({
  id: 0,
  content: '',
  choice: '',
  solution: "",
  analysis: '',
  experienceProvided: 0,
})
const tops = ref<{
  id: number,
  content: string,
  choice: string,
  solution: string,
  analysis: string,
  experienceProvided: number,
}[]>([])


onMounted(() => {
  myAxios.get('/user/topic/all')
      .then((res: any) => {
        tops.value = res.data.data
        topic.value = tops.value[0] ?? {
          id: 0,
          content: "",
          choice: "",
          solution: "",
          analysis: "",
          experienceProvided: 0,
        }
        console.log(res.data.data)
      })
      .catch(err => {
        console.log(err)
      })
})


const text = ref('')
const tex = ref('')

const onHero = (analysis: string) => {

  text.value = 'java语言的特点除了选项ABC之外，还有：简单性、健壮性、可移植性、安全性';
  tex.value = analysis;

}
const flag1 = ref('');
const flag2 = ref('');
const aaa = (choice: string, solution: string) => {
  flag1.value = choice;
  flag2.value = solution;
}

const currentPage = ref(1);
const changePage = (page: number) => {
  text.value = '';
  currentPage.value = page;
  topic.value = tops.value[page - 1] ?? {
    id: 0,
    content: "",
    choice: "",
    solution: "",
    analysis: "",
    experienceProvided: 0,
  }
}
const onClick = () => {
  text.value = '';
  show.value = true;
};
const show = ref(false);

const checked = ref('0');
</script>

<template>

  <van-nav-bar class="nav-bar"
               title="错题"
  >
  </van-nav-bar>
  <img src="../assets/最终返回键.png" class="back-btn1" alt="返回" @click="onClickLeft"/>

  <div class="review-page">
    <div v-if="topic" style="height: 82.5%;">
      <van-pagination
          v-model="currentPage"
          prev-text="上一题"
          next-text="下一题"
          items-per-page="1"
          :total-items="tops.length"
          :show-page-size="3"
          force-ellipses
          @change="changePage"
      />

      <div v-if="topic" style="height: 82.5%;">
        <p style="margin-top: 15%">{{ topic.content }}</p>
        <div v-for="choice in topic.choice.split('\n')" class="choice" :key="choice">
          <van-radio-group v-model="checked" direction="horizontal">
            <van-radio :name="choice" @click="aaa(choice,topic.solution)">{{ choice }}</van-radio>
          </van-radio-group>
        </div>

        <div class="analysis">
          <van-floating-bubble
              icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/wjtz_icon_guize.png"
              @click="onClick" />
          <van-popup v-model:show="show" class="analysis-popup" >
            <div class="analysis-title">
              <p class="analysis-title-text">题目解析</p>
            </div>
            <div class="analysis-content">
              <p >{{text}}</p>
            </div>
            <div class="portrait" id="portrait">
              <img src="../assets/最终人物立绘2.png" class="hero-img" @click="onHero(topic.analysis)">
            </div>
          </van-popup>
        </div>


      </div>
    </div>
  </div>

</template>

<style scoped>
.review-page {
  position: absolute;
  top: 46px;
  bottom: 0;
  left: 0;
  right: 0;
}

.back-btn1 {
  position: absolute;
  float: left;
  top: -1px;
  width: 40px;
  height: 55px;
  left: 0;
  z-index: 2;
}

.nav-bar {
  position: relative;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../assets/导航栏2.png");
  opacity: 0.6;
  z-index: 1;
}

.btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 100px;
  height: 40px;
  left: 39%;
  background-color: #3cd5da;
}


.btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 100px;
  height: 40px;
  left: 39%;
  background-color: #3cd5da;
}

.choice {
  left: 5%;
  width: 80%;
  height: 50px;
  position: relative;
}


.nav-bar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../assets/导航栏2.png");
  opacity: 1;
  z-index: 1;
}

.back-btn1 {
  position: fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index: 2;
}


.analysis-title{
  position: relative;
  width: 100%;
  height: 24px;
  border-radius: 10px 10px 0 0;
}
.analysis-title-text{
  font-family: STXingkai,serif  ;
  font-size: 24px;
  color: #000;
  text-align: center;
  margin-top: 20px;
}




.choice {
  left: 5%;
  width: 80%;
  height: 40px;
  position: relative;
}

.analysis-popup{

  width: 85%;
  height:85%;
  position: absolute;
  background-image: url("../assets/最终题目解析背景.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  padding: 10%;
}
.portrait{
  width: 50%;
  height: 40%;
  position: absolute;
  top: 55%;   /*55*/
  left: -5%;
}
.hero-img{
  width: 90%;
  height: 90%;
}



.nav-bar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../assets/导航栏2.png");
  opacity: 1;
  z-index: 1;
}

.back-btn1 {
  position: fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index: 2;
}

</style>